<template>
    <div id="asidemenu">
         <div id="pos">
             <el-menu
            default-active="1"
            class="el-menu-vertical-demo"
            router
            background-color="#000"
            text-color="#fff"
            active-text-color="#ffd04b">

                <el-submenu index="1">
                    <template slot="title">
                        <i class="el-icon-s-tools"></i>
                        <span>商城设置</span>
                    </template>
                    <el-menu-item index="/banner">海报管理</el-menu-item>
                    <el-menu-item index="/menulist">分类导航</el-menu-item>
                    <el-menu-item index="/hotsearch">热搜管理</el-menu-item> 
                </el-submenu>

                <el-submenu index="2">
                    <template slot="title">
                        <i class="el-icon-s-goods"></i>
                        <span>商品管理</span>
                    </template>
                    <el-menu-item index="/goodsClass">商品分类</el-menu-item>
                    <el-menu-item index="/goodsList">所有商品</el-menu-item>
                    
                </el-submenu>

                <el-submenu index="3">
                    <template slot="title">
                        <i class="el-icon-user"></i>
                        <span>用户管理</span>
                    </template>
                    <el-menu-item index="/superuserlist">管理员</el-menu-item>
                    <el-menu-item index="/userList">会员</el-menu-item>
                </el-submenu>

                <el-submenu index="4">
                    <template slot="title">
                        <i class="el-icon-document-copy"></i>
                        <span>病类管理</span>
                    </template>
                    <el-menu-item index="/yaowuguomin">药物过敏</el-menu-item>
                    <el-menu-item index="/foodguomin">食物过敏</el-menu-item>
                    <el-menu-item index="/manxingbing">慢性病</el-menu-item>
                    <el-menu-item index="/familybing">家族病史</el-menu-item>
                    <el-menu-item index="/selfdone">个人习惯</el-menu-item>
                </el-submenu>

                <el-submenu index="5">
                    <template slot="title">
                        <i class="el-icon-s-operation "></i>
                        <span>信息管理</span>
                    </template>
                    <el-menu-item index="/infoclass">信息分类</el-menu-item>
                    <el-menu-item index="/infolist">信息列表</el-menu-item>
                 
                </el-submenu>

               

                <el-submenu index="6">
                    <template slot="title">
                        <i class="el-icon-s-home"></i>
                        <span>医院相关</span>
                    </template>
                    <el-menu-item index="/keshilist">科室类目</el-menu-item>
                    <!-- <el-menu-item index="/infolist">信息列表</el-menu-item> -->
                 
                </el-submenu>

            </el-menu>
         </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                clientHeight: ""
            }
        },
        mounted () {
            this.onSizeChange();
        },
        methods: {
            // 获取视图高度
            getClientHeight() {
                let aside = document.getElementById("asidemenu")
                let height = document.documentElement.scrollHeight
                aside.style.height = `${height - 60}px`
                
            },
            // 视图代销改变时
            onSizeChange() {
                this.getClientHeight()
                window.onresize = function () {
                    let aside = document.getElementById("asidemenu")
                    let height = document.documentElement.scrollHeight
                    aside.style.height = `${height - 60}px`
                }
                window.onscroll = function () {
                    let aside = document.getElementById("asidemenu")
                    let height = document.documentElement.scrollHeight
                    aside.style.height = `${height - 60}px`
                        
                }
            },
            
        },
        updated() {
            this.getClientHeight()
        },
    }
</script>

<style lang="scss" scoped>
 #asidemenu {
     width: 202px;
     overflow: hidden;
     box-sizing: border-box;
     background-color: #000;
     position: relative;
     left: 0; top: 0;
     #pos {
         width: 202px;
         position: fixed;
            left: 0;
            top: 60px;
     }
 }
</style>